<template>
	<view class="wrap">
		<!-- 取车网点 -->
		<view>
			<view class="topTip">
				<text class="tipTitle cityTip">取还车地点</text>
			</view>
			<view class="takeStationInfo" @tap="showStore = true">
				<text>{{currentStore.storeName}}</text>
			</view>

			<!-- 租赁时间 -->
			<view>
				<!-- 时间 -->
				<view class="timeBox" @tap="chooseTime">
					<view class="timeContent">
						<text class="date">{{takeCarDate}}</text>
						<text class="time">{{takeCarWeek +'  ' + takeCarTime}}</text>
					</view>
					<view class="duration">
						共{{duration}}
						<image style="display: block; width: auto; height: 20upx;"
							src="@/static/home/duration_arrow.png"></image>
					</view>
					<view class="timeContent">
						<text class="date">{{returnCarDate}}</text>
						<text class="time">{{returnCarWeek + '  ' + returnCarTime}}</text>
					</view>
				</view>


				<!-- 立即选车 -->
				<view class="chooseCarBtn" @tap="addOrder">
					立即订车
				</view>

			</view>

			<u-picker :show="showStore" :columns="storeList" keyName="storeName" closeOnClickOverlay
				@close="showStore=false" @cancel="showStore=false" title="选择取还车地点" @confirm="confimStore">
			</u-picker>
		</view>
	</view>
</template>

<script>
	var moment = require('@/utils/moment.js');
	moment.locale('zh-cn');
	export default {
		name: '',
		data() {
			return {
				showStore: false,
				// currentStore: {
				// 	storeName: '请选择取还车地点'
				// },
				index : 0
			}
		},
		props: {
			businessNo: {
				type: Number,
				default: 1
			},
			carInfo: {
				type: Object,
				default () {
					return {}
				}
			},
			activityId: {
				type: String,
				default: ''
			}
		},

		computed: {
			startTime() {
				return this.$store.state.order.startTime;
			},
			takeCarDate() {
				return moment(this.startTime).format("MM月DD日");
			},
			takeCarWeek() {
				return this.getWeek(this.startTime);
			},
			takeCarTime() {
				return moment(this.startTime).format("HH:mm");
			},
			endTime() {
				return this.$store.state.order.endTime;
			},
			returnCarDate() {
				return moment(this.endTime).format("MM月DD日");
			},
			returnCarWeek() {
				return this.getWeek(this.endTime);
			},
			returnCarTime() {
				return moment(this.endTime).format("HH:mm");
			},

			duration() {
				const date1 = moment(this.startTime);
				const date2 = moment(this.endTime);
				const duration = date2.diff(date1, 'hour'); //相差的总小时数
				const days = Math.floor(duration / 24); //相差的天数
				const hours = duration % 24; //相差的小时数
				var offsetTime;
				if (hours > 0) {
					offsetTime = days + '天' + hours + '小时';
				} else {
					offsetTime = days + '天';
				}
				return offsetTime;
			},

			storeList() {
				return [this.carInfo.storeList];
			},
			isLogin() {
				return this.$store.state.user.isLogin;
			},
			currentStore() {
				return this.carInfo.storeList[this.index];
			}
		},
		onReady() {

		},
		methods: {
			//根据时间获取星期
			getWeek(time) {
				let m1 = moment().format('YYYY-MM-DD');
				let m2 = moment(time).format('YYYY-MM-DD');
				let day = moment(m2).diff(m1, 'day');
				if (day == 0) {
					return '今天'
				} else if (day == 1) {
					return '明天'
				} else if (day == 2) {
					return '后天'
				} else {
					let week = moment(time).day();
					switch (week) {
						case 1:
							return '周一'
						case 2:
							return '周二'
						case 3:
							return '周三'
						case 4:
							return '周四'
						case 5:
							return '周五'
						case 6:
							return '周六'
						case 0:
							return '周日'
					}
				}
			},
			// 选择门店
			confimStore(e) {
				console.log(e);
				// this.currentStore = e.value[0];
				this.index = e.indexs[0];
				this.showStore = false;
			},

			//选择时间
			chooseTime() {
				uni.navigateTo({
					url: '/pagesA/time/usecar-time'
				})
			},
			// 立即订车
			addOrder() {
				if (this.isLogin) {
					if (!this.$u.test.isEmpty(this.currentStore.storeId)) {

						let data = {
							planId: this.carInfo.planId,
							carUrl: this.carInfo.modelUrl,
							businessNo: this.businessNo,
							storeId: this.currentStore.storeId,
							storeName: this.currentStore.storeName,
							storeAddress: this.currentStore.addrDetail,
							storeLat: this.currentStore.lat,
							storeLng: this.currentStore.lon,
							activityId: this.activityId,
							rentAmount: this.carInfo.modelPresentPrice,
						};

						let params = uni.$u.queryParams(data, true, 'indices');
						uni.navigateTo({
							url: '/pagesA/order/activityCar-addShortOrder' + params
						})

					} else {
						this.$u.toast('请选择取还车门店');
					}
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		top: 10upx;
		background-color: $bg-white-color;
		display: flex;
		flex-direction: column;
		border-radius: 16upx;
		padding: 20upx;
	}

	.topTip {
		display: flex;
		justify-content: space-between;

		.address {
			position: relative;
			left: -120upx;
		}

	}

	.tipTitle {
		color: $text-color-99;
		font-size: 24upx;
	}

	.cityTip {
		width: 100%;
	}

	.takeStationInfo {
		margin-top: 20upx;
		border-bottom: 1upx solid $liner-color;
		padding-bottom: 16upx;
		display: flex;
		justify-content: space-between;

		text {
			color: $text-color-33;
			font-weight: bold;
			font-size: 28upx;
		}

		.address {
			width: 50%;
			overflow: hidden;
			position: relative;
			left: -10upx;

		}
	}

	.returnStationWrap {
		margin-top: 20upx;
		border-bottom: 1upx solid $liner-color;
		padding-bottom: 16upx;

	}

	.returnTip {
		margin-top: 20upx;
		display: flex;

		.address {
			position: relative;
			left: 46upx;
		}
	}

	.returnStationInfo {
		display: flex;

		text {
			color: $text-color-33;
			font-weight: bold;
			font-size: 28upx;

		}

		.address {
			width: 50%;
			overflow: hidden;
			position: relative;
			left: 60upx;

		}
	}

	.diifTip {
		margin-top: 20upx;
		font-size: 22upx;
		color: $main-color;

		&.active {
			color: #FF8643;
		}
	}

	.timeBox {
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.timeContent {
			display: flex;
			flex-direction: column;

			.date {
				color: $text-color-33;
				font-size: 30upx;
				font-weight: bold;
			}

			.time {
				margin-top: 10upx;
				color: $text-color-99;
				font-size: 24upx;
			}
		}

		.duration {
			color: $text-color-99;
			font-size: 24upx;
		}

	}

	.checkBox {
		margin-top: 20upx;
	}

	.chooseCarBtn {
		margin: 20upx 0;
		width: 100%;
		height: 88upx;
		background: linear-gradient(to right, #32ace9 0%, #176cfb 100%);
		color: $bg-white-color;
		line-height: 88upx;
		text-align: center;
		border-radius: 10upx;

		&.active {
			background: linear-gradient(to right, #FFC580 0%, #FF8543 100%);
		}
	}

	.wxTipsBox {
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
		position: relative;

		&::before {
			content: '';
			display: block;
			height: 8upx;
			width: 8upx;
			border-radius: 4upx;
			background: $main-color;
			position: absolute;
			top: 6px;
			left: 6px;

		}

		&.active {
			&::before {
				background: #FF8643;
			}
		}

		.wxTips {
			position: relative;
			left: 15px;
			color: $text-color-33;
		}

		.lookUp {
			color: $main-color;

			&.active {
				color: #FF8643;
			}
		}

	}
</style>
